<template>
	<div class>
		<!-- 查询表单 -->
		<div class="search_form">
			<div>
				<el-input class="workCom" v-model="searchForm.fixName" clearable size="mini" placeholder="维修方式"></el-input>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="searchClick()"
					size="mini"
					class="btn_search"
				>查询</el-button>
			</div>
			<div>
				<!-- 添加删除按钮 -->
				<div class>
					<el-button icon="el-icon-plus" size="mini" @click="addhitchFix"></el-button>
				</div>
			</div>
		</div>

		<!-- 表格 -->
		
			<el-table highlight-current-row stripe :data="tableData" :height="this.cuHeight - 210">
				<el-table-column prop="fixName" label="维修方式" width></el-table-column>
			
				<el-table-column prop="createName" label="录入人" width></el-table-column>
				<el-table-column prop="createTime" label="录入时间" width></el-table-column>
				
				<el-table-column fixed="right" label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
							<i class="iconfont icon-liebiaotubiao_liebiaobianji" style="color:#2166B2"></i> 编辑
						</el-button>
						<el-popconfirm @onConfirm="sub(scope.row.id)" @onCancel="cancel" title="您确定删除吗？">
							<el-button size="mini" type slot="reference">
								<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除
							</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
	
		<!-- 分页 -->
		<div class="page">
			<el-pagination
				background
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				:current-page="pageNum"
				:page-size="pageSize"
				:page-sizes="[10, 15, 30, 50]"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			></el-pagination>
		</div>

		<!-- 添加维修方式 -->
		<el-drawer
			title="新增维修方式"
			:visible.sync="addDrawer"
			direction="rtl"
			size="30%"
			:before-close="handleClose"
		>
			<el-form
				:model="addForm"
				:rules="addFormRules"
				ref="ruleAddForm"
				label-width="100px"
				style="padding:20px"
			>
				<el-form-item label="维修方式" prop="hitchName">
					<el-input
						@input="addForm.fixName=verifyfilter('charemach',addForm.fixName)"
						v-model="addForm.fixName"
					></el-input>
				</el-form-item>
				

				
				</el-form-item>
				<div class="demo-drawer__footer">
					<el-button size="small" type="primary" @click="submitAddForm()">保 存</el-button>
				</div>
			</el-form>
		</el-drawer>

		<!-- 关联机构 -->
		<div class="relatedInstitutions">
			<el-drawer :title="companyName" :visible.sync="relationDrawer" direction="rtl">
				<div class="headerspan-item">关联机构</div>
				<div class="form-t">
					<el-form>
						<el-form-item :label-width="'120px'">
							<el-checkbox-group v-model="checkedComp" @change="compChange">
								<el-checkbox
									v-for="(city,index) in comp"
									:label="city.companyName"
									:key="index"
								>{{city.companyName}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-form>
				</div>
				<div class="demo-drawer__footer">
					<el-button
						size="small"
						type="primary"
						@click="mprocesscomp()"
						:loading="loading"
					>{{ loading ? '提交中 ...' : '保 存' }}</el-button>
				</div>
			</el-drawer>
		</div>

		<!-- 编辑维修方式 -->
		<el-drawer title="编辑维修方式" :visible.sync="dialogFormVisible">
			<el-form :model="editForm" label-width="100px" style="padding:20px">
				<el-form-item label="维修方式" prop="fixName">
					<el-input
						@input="editForm.fixName=verifyfilter('charemach',editForm.fixName)"
						v-model="editForm.fixName"
					></el-input>
				</el-form-item>
			</el-form>

			<div class="demo-drawer__footer">
				<el-button size="small" type="primary" @click="edit()">保 存</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script>
import { formatDate } from '@/libs/date'
export default {
	name: 'fixName',
	data() {
		return {
			//搜索表单
			searchForm: {
				fixhName: '' //维修方式
				
			},
			
			// 添加维修方式
			addForm: {
				fixName: '', //
				createBy: '',
				createTime: '',
				updateBy: '',
				updateTime: '',
				updateName: '',
				createName: ''
			},
			addFormRules: {
				fixName: [
					{
						required: true,
						message: '请输入维修方式',
						trigger: 'blur'
					}
				]
			},
			//添加机械作业公司数据
			companyList: [],
			//机械型号数据
		
			editForm: {
			
			},

			// 角色分页列表数据
			total: 0, //总页数
			pageSize: 10, //当前每页显示多少数据
			pageNum: 0, //当前页码
			queryInfo: {},

			dialogFormVisible: false, // 修改弹出框
			// 抽屉
			drawer: false, // 新增
			addDrawer: false,
			relation: false, // 关联
			relationDrawer: false, //关联机构
			loading: false,
			tableData: [],
			comp: [],
			nowData: {}, // 临时存放操作数据
			companyName: '',
			// 分类
		
			locateList: [],
			solList: []
		}
	},
	mounted() {
		// 故障列表
		this.gethitchFixList()	
	},
	filters: {
		// 时间
		formatDate(time) {
			let date = new Date(time)
			return formatDate(date, 'yyyy.MM.dd')
		}
	},
	methods: {
		// 关联机构
		async compMod(info) {
			if (!this.relationDrawer) {
				this.relationDrawer = true
			}
			this.nowData = info
			const that = this
			let data = []
			let ids = new Array()
			const res = await this.$http.get(
				`/${this.$ServiceName}/api/external/mmachineInfo/listmachinebind?id=${info.id}`
			)

			
		},
		newArr(arr) {
			return Array.from(new Set(arr))
		},
	   //获取维修方式信息列表
		async gethitchFixList() {
			const res = await this.$http.get(
				`/${this.$ServiceName}/api/external/mmachine/query?startpage=1&pagesize=10&macclassType=MAC_TYPE`
			)
			if (res.status != 200) {
				return this.$message.warning('获取数据失败')
			}
			this.tableData = res.data.data.pages
			// this.tableData.forEach((n)=>{
			//   n.createTime = n.createTime.toLocaleDateString()
			// })
			this.total = parseInt(res.data.data.totalNum)
			this.pageNum = parseInt(res.data.data.pageNum)
		},
		// 查询
		async searchClick() {
			const res = await this.$http.get(
				`/${this.$ServiceName}/api/external/mmachine/query?startpage=1&pagesize=${this.pageSize}&macTypeCode=${this.searchForm['macTypeCode']}&maccNo=${this.searchForm['maccNo']}`
			)
			if (res.data.code != '0000') {
				return this.$message.warning('查询失败！')
				return
			}
			// this.$message.success('查询成功！')

			this.tableData = res.data.data.pages
			this.total = parseInt(res.data.data.totalNum)
			this.pageNum = parseInt(res.data.data.pageNum)
		},
		
		//添加维修方式
		async addhitchFix() {
			this.addDrawer = true

			this.addForm = {
				fixName: '', //
				createBy: '',
				createTime: '',
				updateBy: '',
				updateTime: '',
				updateName: '',
				createName: ''
			}
		},
		// 添加机械验真提交form表单
		submitAddForm() {
			delete this.addForm.updateTime
			delete this.addForm.updateName
			delete this.addForm.updateBy
			delete this.addForm.createBy
			
			this.$refs['ruleAddForm'].validate(async valid => {
				if (valid) {
					const res = await this.$http.post(
						'/${this.$ServiceName}/api/external/mmachine/add',
						this.addForm
					)

					if (res.data.code != '0000') {
						return this.$message.warning(res.data.msg)
						
					}
					this.$message.success('添加成功！')
					this.addDrawer = false
					
				} else {
					return false
				}
			})
		},
		//添加机械验真提交form重置表单
		resetAddForm() {
			this.$refs['ruleAddForm'].resetFields()
		},
		// 根据id修改机械数据
		async handleEdit(index, info) {
			
			this.dialogFormVisible = true
			const res = await this.$http.get(
				`/${this.$ServiceName}/api/external/mmachine/querybyid?id=${info.id}`
			)
			if (res.data.success) {
				this.editForm = res.data.data
			} else {
				this.editForm = info
			}
		},

		//关联结构
		RelationFun(id) {
			this.relationDrawer = true
		},
		// 删除确认
		async sub(codes) {
			const res = await this.$http.delete(
				`/${this.$ServiceName}/api/external/mmachine/delete/${codes}`
			)
			if (res.data.code == '0000') {
				this.$message.success('删除成功！')
				//重新获取数据
				
			}
		},
		// 取消
		cancel() {
			if (this.dialogFormVisible) {
				this.dialogFormVisible = false
			}
			if (this.drawer) {
				this.drawer = false
			}
			this.$message('已取消！')
		},
		// 编辑机械型号修改按钮
		async edit() {
			delete this.editForm.createTime
			delete this.editForm.updateTime
			delete this.editForm.updateName
			delete this.editForm.updateBy
			delete this.editForm.createBy
			delete this.editForm.createName

			

			const res = await this.$http.put(
				'/${this.$ServiceName}/api/external/mmachine/updateone',
				this.editForm
			)
			if (res.data.code != '0000') {
				return this.$message.warning(res.data.msg)
			}
			this.dialogFormVisible = false
			this.$message.success('修改成功！')
			
		},
		// 监听pageSize改变事件
		async handleSizeChange(newSize) {
			this.pageSize = newSize
			const res = await this.$http.get(
				`/${this.$ServiceName}/api/external/mmachine/query?pagesize=${this.pageSize}&startpage=${this.pageNum}`
			)
			// console.log(res);
			this.tableData = res.data.data.pages
			this.total = parseInt(res.data.data.totalNum)
			this.pageNum = parseInt(res.data.data.pageNum)
		},
		//分页 监听页码值改变
		async handleCurrentChange(newPage) {
			const res = await this.$http.get(
				`/${this.$ServiceName}/api/external/mmachine/query?pagesize=10&startpage=${newPage}`
			)
			this.tableData = res.data.data.pages
			this.total = parseInt(res.data.data.totalNum)
			this.pageNum = parseInt(res.data.data.pageNum)
		},
		//dilog 关闭询问
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done()
					this.$refs['ruleAddForm'].resetFields()
				})
				.catch(_ => {})
		}
	}
}
</script>

<style lang="less" scoped>
/deep/ .el-button--primary {
	background-color: #338ce8;
	border-color: #338ce8;
}

// 查询表单start
.search_form {
	border: 1px solid #ebeef5;
	background-color: #fff;
	color: #303133;
	border-radius: 4px;
	font-size: 14px;
	color: #606266;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;

	.btn_search,
	.workCom {
		margin-left: 10px;
	}
	/deep/.el-input {
		width: 150px;
	}
}
// 查询表单end
.page {
	background: #ffffff;
	border-radius: 4px 4px 0 0;
}
.box {
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-radius: 4px 4px 0 0;
	border-top: none;
}
/deep/ .el-drawer__header {
	// margin-bottom: 12px;
	height: 40px;
	line-height: 41px;
	padding: 0 16px;
	box-sizing: border-box;
	border-bottom: 1px solid gainsboro;
	margin-bottom: 0;
}
/deep/ .demo-drawer__footer {
	text-align: right;
	padding-right: 1rem;
	border-top: 1px solid #c8cfde;
	background-color: #f5f7fa;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 50px;
}
/deep/ .el-table .cell {
	white-space: nowrap;
}

/deep/ .el-pagination {
	text-align: right;
	padding: 10px 20px;
}
/deep/ .el-table th > .cell {
	font-family: PingFangSC-Semibold;
	font-size: 14px;
	color: #606266;
}
/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
	background-color: #fff;
	border: 1px solid #e1e4eb;
}
/deep/ .el-table .el-button--mini {
	color: #1684f6;
	border-color: transparent;
	background: transparent;
}
/deep/ .el-table th {
	border-left: 1px solid #ebeef5;
}
/deep/ .el-table th:nth-child(1) {
	border-left: none;
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
	background: #f5f7fa;
}

/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-radius: 3px;
	border-radius: 3px;
}

/deep/ .el-drawer__open .el-drawer.rtl {
	background: #f5f7fa;
}

/deep/ .el-drawer__body {
	overflow-y: auto;
	padding-bottom: 50px;
}
.header {
	width: 100%;
	height: 41px;
	line-height: 41px;
	background-color: #fff;
	padding: 0 20px;
	box-sizing: border-box;
}
.relatedInstitutions /deep/ .el-drawer__open .el-drawer.rtl {
	width: 30% !important;
	background: #f5f7fa;
}
.headerspan {
	background: #ffffff;
	border-bottom: 1px solid #e1e4eb;
	line-height: 40px;
	padding-left: 1rem;
}
.headerspan-item {
	line-height: 40px;
	padding-left: 1rem;
	font-size: 14px;
	color: #606266;
	letter-spacing: 0;
}
.btn /deep/ .el-button--mini,
.el-button--mini.is-round {
	padding: 7px 6px;
}
</style>
